<template>
    <div class="loginContainer">
        <div class="svg-div goback" @click="$router.go(-1)">
            <svg class="icon-svg">
				<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"></use>
			</svg>
        </div>
        <div class="svg-logo">
            <svg class="icon-svg" fill="#fff">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use>
            </svg>
            <div>短视频</div>
        </div>
        <div class="form">
            <form>
                <div class="input-box tel">
                    <div class="svg-input">
                        <svg class="icon-svg" fill="#fff">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mine"></use>
                        </svg>
                    </div>
                    <input class="input" type="text" placeholder="手机号" v-model="mobile" />
                    <div class="look"></div>
                </div>
                <div class="input-box password">
                    <div class="svg-input">
                        <svg class="icon-svg" fill="#fff">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#password"></use>
                        </svg>
                    </div>
                    <input class="input" v-if="!showPassword" type="password" placeholder="密码"  v-model="password">
                    <input class="input" v-else type="text" placeholder="密码"  v-model="password">
                    <div class="look">
                        <div class="svg-attention" @click="changePassWordType">
                            <svg class="icon-svg" fill="#fff">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="showPassword?'#attention':'#attention-forbid'"></use>
                            </svg>
                        </div>
                    </div>
                </div>

                <div class="forget">
                    <router-link to="/forget">忘记密码?</router-link>
                </div>
                <div class="login" @click="toLogin">登录</div>

                <div class="register">
                    没有账号？<router-link to="/register">立即注册</router-link>
                </div>
            </form>
        </div>
        <div class="login-quick">
            <div class="title">快捷登录</div>
            <div class="type">
                <div class="svg-qq">
                    <svg class="icon-svg" fill="#fff">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#qq"></use>
                    </svg>
                </div>
                <div class="svg-weibo">
                    <svg class="icon-svg" fill="#fff">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#weibo"></use>
                    </svg>
                </div>
                <div class="svg-weixin">
                    <svg class="icon-svg" fill="#fff">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#weixin"></use>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>

<script> 
    import {submit} from '@/api'
    import {Toast} from 'mint-ui'
    import {mapState, mapMutations} from 'vuex'

    export default {
        data(){
            return {

                showPassword: false, // 是否显示密码
                mobile: null, //电话号码
                password: null, //密码
            }
        },
        computed: {
            //判断手机号码
            rightmobile: function (){
                return /^1\d{10}$/gi.test(this.mobile)
            }
        },
        methods: {
            ...mapMutations([
                'RECORD_USERINFO',
            ]),
            toLogin() {
                if (!this.mobile) {
                    Toast('请输入手机号');
                    return
                }else if (!this.rightmobile) {
                    Toast('手机号码不正确');
                    return
                }else if(!this.password){
                    Toast('请输入密码');
                    return
                }
                var para = {
                    mobile: this.mobile,
                    password: this.password
                };
                submit(para).then(res => {
                    let { data, msg, sessionid } = res;
                    if (!data) {
                        Toast(msg);
                    } else {
                        let userInfo = Object.assign({}, res.data);
						    userInfo.sessionid = res.sessionid;
                        this.RECORD_USERINFO(userInfo);
                        this.$router.go(-1);
                    }
                });
            },
            
            //是否显示密码
            changePassWordType(){
                this.showPassword = !this.showPassword;
            },
            
            
        }
    }

</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    .loginContainer{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: -webkit-linear-gradient(270deg, rgba(255, 195, 113, 1) 0%, rgba(255, 195, 113, 1) 0%, rgba(255, 95, 109, 1) 100%, rgba(255, 95, 109, 1) 100%);
        background: -moz-linear-gradient(180deg, rgba(255, 195, 113, 1) 0%, rgba(255, 195, 113, 1) 0%, rgba(255, 95, 109, 1) 100%, rgba(255, 95, 109, 1) 100%);
        background: linear-gradient(180deg, rgba(255, 195, 113, 1) 0%, rgba(255, 195, 113, 1) 0%, rgba(255, 95, 109, 1) 100%, rgba(255, 95, 109, 1) 100%);
        
		.goback {
			width: 1.95rem;
			height: 1.95rem;
			position: absolute;
			top: 0;
            left: 0;
            &.svg-div {
                .icon-svg {
                    fill: #fff;
                    margin-top: 25%;
                    margin-left: 25%;
                    width: 50%; 
                    height: 50%;
                }
            }
        }
        
        .svg-logo {
            margin: 2rem auto 2rem auto;
            text-align: center;
            color:#fff;
            .icon-svg {
                width: 3rem;
                height: 3rem;
            }
        }
        .form {
            width: 70%;
            margin: 0 auto;
            font-size: 0.6rem;
            .svg-input {
                width: 1.5rem;
            }
            a {
                color:#fff;
            }
        }
        .forget {
            text-align: right;
            padding-top:0.2rem;
            padding-bottom: 1rem;
        }
        .register{
            text-align: center;
            color:#fff;
        }
        .login{
            width: 100%;
            height: 2rem;
            line-height: 2rem;
            border-radius: 2rem;
            text-align: center;
            background: rgba(255,255,255,.5);
            color:#F86254;
            margin: 0.5rem 0; 
        }
        .input-box{
            display: flex;
            justify-content:space-between;
            border-bottom: 1px solid #fff;
            padding: 1rem 0 0.5rem 0;
            .input {
                width: 100%;
                color:#fff;
                background: transparent;
                // background: #ccc;
            }
            .look{
                width: 1rem;
            }
            .icon-svg {
                width: 0.8rem;
                height:0.8rem;
            }
        }

        ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
            color:#fff;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color:#fff;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color:#fff;
        }
        :-ms-input-placeholder { /* Internet Explorer 10-11 */
            color:#fff;
        }
    }
    .login-quick {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding-bottom: 0.7rem;
        .title {
            text-align: center;
            font-size: 0.6rem;
            padding-bottom: 0.7rem;
            color:#fff;
        }
        .type{
            width: 40%;
            margin: 0.5rem auto;
            display: flex;
            justify-content:space-between;
        }
        .type>div {
            width: 1.6rem;
            height: 1.6rem;
            background: rgba(255,255,255, .5);
            border-radius: 50%;
        }
        .icon-svg {
            width: 1.2rem;
            height:1.2rem;
            margin: 0.2rem 0 0 0.2rem;
        }

    }
</style>
